<template>
	<view>
		<view class="tab">
			<text :class="isRead==1?'active':''" v-text="`已读${readNum[1]}`" @click="changeTab(1)"></text>
			<text :class="isRead==0?'active':''" v-text="`未读${readNum[0]}`" @click="changeTab(0)"></text>
		</view>
		<menuBox :menuInfo="menuInfo"></menuBox>
	</view>
</template>

<script>
	import menuBox from "../../wxcomponents/commonLayout/menu.vue"
	export default {
		data() {
			return {
				menuInfo: {
					base: {
						menuProp: [
							"name", "time"
						],
						tit: []
					},
					list: []
				},
				readNum: "",
				isRead: 1,
				id:""
			}
		},
		onLoad(option) {
			this.id = option.data
			this.count()
			this.getList()
		},
		methods: {
			//已读未读数量统计
			async count() {
				let resp = await this.$http.get({
					url: '/oa/notification/weChat/countRead',
					data: {
						id: this.id
					}
				});
				this.readNum = resp.result;
			},
			//已读未读详情列表
			async getList(id) {
				let resp = await this.$http.get({
					url: '/oa/notification/weChat/readList',
					data: {
						isRead: this.isRead,
						notificationId: this.id
					}
				});
				this.menuInfo.list = resp.result.map(item => {
					return {
						time: item.readTime,
						name: item.receiveName
					}
				})
			},
			//改变tab标签卡
			changeTab(e){
				this.isRead = e
				this.getList()
			}
		},
		components: {
			menuBox
		}
	}
</script>

<style lang="scss" scoped>
	.tab {
		width: 650upx;
		height: 72upx;
		background: rgba(218, 221, 229, 1);
		border-radius: 8upx;
		margin: 20upx auto;
		padding: 4upx 5upx;

		text {
			width: 320upx;
			height: 64upx;
			display: inline-block;
			text-align: center;
			color: #999999;
		}

		.active {
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 2upx 10upx 0px rgba(0, 0, 0, 0.1);
			border-radius: 8upx;
			font-size: 30upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			text-align: center;
			line-height: 64upx;
		}
	}
</style>
